<canvas width=200 height=200 style="outline:1px solid gray;">
    非常抱歉，您的浏览器不支持canvas!
</canvas>

<!-- 顶点着色器 -->
<script type='x-shader/x-vertex' id='vs'>
    attribute vec4 a_position;
    attribute vec2 a_textcoord;
    varying vec2 v_textcoord;
    void main(){
        gl_Position = a_position;
        v_textcoord=a_textcoord;
    }
</script>

<!-- 片段着色器 -->
<script type='x-shader/x-fragment' id='fs'>
    precision mediump float;
    uniform sampler2D u_sampler;
    varying vec2 v_textcoord;
    void main(){
        gl_FragColor=texture2D(u_sampler,v_textcoord);
    }
</script>

<script>

    setTimeout(function () {

        var gl = document.getElementsByTagName('canvas')[0].getContext('webgl');

        var loadShader = function (type, source) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        };

        var vertexShader = loadShader(gl.VERTEX_SHADER, document.getElementById('vs').innerHTML),
            fragmentShader = loadShader(gl.FRAGMENT_SHADER, document.getElementById('fs').innerHTML);

        var glProgram = gl.createProgram();

        gl.attachShader(glProgram, vertexShader);
        gl.attachShader(glProgram, fragmentShader);

        gl.linkProgram(glProgram);
        gl.useProgram(glProgram);

        // 数据
        var data = new Float32Array([
            // 顶点坐标3，纹理坐标2
            -1.0, 1.0, 0, 0.0, 0.0,
            -1.0, -1.0, 0, 0.0, 1.0,
            1.0, 1.0, 0, 1.0, 0.0,
            1.0, -1.0, 0, 1.0, 1.0
        ]);

        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        var useArray = [
            ['a_position', 3, 5, 0],
            ['a_textcoord', 2, 5, 3]
        ];
        for (var i = 0; i < useArray.length; i++) {
            var location = gl.getAttribLocation(glProgram, useArray[i][0]);
            gl.vertexAttribPointer(location, useArray[i][1], gl.FLOAT, false, useArray[i][2] * data.BYTES_PER_ELEMENT, useArray[i][3] * data.BYTES_PER_ELEMENT);
            gl.enableVertexAttribArray(location);
        }

        // 创建纹理对象
        var texture = gl.createTexture();

        // 开启纹理单元，编号1
        gl.activeTexture(gl.TEXTURE1);

        // 绑定纹理对象到目标上
        gl.bindTexture(gl.TEXTURE_2D, texture);

        // 配置纹理
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

        var image = new Image();
        image.onload = function () {

            // 链接资源图片
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

            // 设置纹理单元
            gl.uniform1i(gl.getUniformLocation(glProgram, 'u_sampler'), 1);

            // 绘制
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

        };
        image.src = '../images/zxl20070701.jpg';
    });


</script>